<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'gridViewTest.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link href="<%=path%>/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
<link href="<%=path%>/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<%=path%>/js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.jqGrid.min.js"></script>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>
<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "/PoliceProject/servlet/GridTestServlet",
        datatype: "json",
        mtype: "POST",
        colNames: ["编号", "用户名", "性别", "邮箱", "QQ", "手机号","出生日期"],
         colModel:[  
         {name:'id',index:'id', width:60, sorttype:"int"},  
         {name:'userName',index:'userName', width:90},  
         {name:'gender',index:'gender', width:90},  
         {name:'email',index:'email', width:125,sorttype:"string"},  
         {name:'QQ',index:'QQ', width:100},        
         {name:'mobilePhone',index:'mobilePhone', width:120},          
         {name:'birthday',index:'birthday', width:100, sorttype:"date"}
         ],
        pager: "#pager",
       sortname:'id',  
 sortorder:'asc',  
viewrecords:true,  
rowNum:10,  
rowList:[10,20,30],  
jsonReader:{  
repeatitems : false  
},
    gridview: true,
    autoencode: true,
    caption: "My first grid"
    }).navGrid("#pager",{edit:false,add:false,del:false}); 
}); 


</script>

  </head>
  
  <body>
    <table id="list"></table> 
    <div id="pager"></div>
  </body>
</html>
